<template>
	<view class="car">
		<view class="top">
			<view @click="changeEdit">{{Edit?'完成':'编辑'}}</view>
		</view>

		<view class="content">
			<view class="padding">
				
			</view>
			<view class="GoodsList" v-if="Item.length">
					<uni-swipe-action  v-for="(item,i) in Item" :key="i">
					  <uni-swipe-action-item :autoClose = 'true' :options="options" @click="deleteItem(i)" @change="change($event, index)">
				<view class="GoodsItem" >
					    <view class="radio" :class="item.active?1:'radioActive'" @click="radiochange(item)"></view>
					    <image :src="item.cover||'../../../static/微信图片_20201124091755.png'" mode=""></image>
						<view class="image" v-if="item.on_sale!=1|| item.stock == 0">
							已失效
						</view>
					    <view class="ItemContent">
					    	<view class="title">{{item.name}}</view>
					    	<view class="parameter">
					    		<view class="parameter1">{{item.option_name}}</view>
					    	</view>
					    	<view class="price">￥{{item.price}}</view>
					    	<view class="ctrlbox" v-if="Edit">
					    		<button :disabled="item.quantity==1?true:false" @click="changeNum(-1,item)">-</button>
					    		<view class="ItemNum">{{item.quantity}}</view>
					    		<button @click="changeNum(1,item)">+</button>
					    	</view>
							<view class="ctrlbox" v-else>
								x{{item.quantity}}
							</view>
					    </view>
				</view>
					  </uni-swipe-action-item>
					</uni-swipe-action>
			</view>
				
				
				

			<view class="ModalHide" v-else>

				<view class="ModalContent">
					<image src="../../../static/cart.png" mode=""></image>
					<view class="Modaltitle">您的购物车是空的</view>
					<navigator url="/pages/shopping/shopping/shopping" open-type="switchTab">去商城逛逛</navigator>
				</view>
			</view>
			<view class="HotGoodscurrent">
				<view class="HotGoodscurrent_title">
					热卖推荐
				</view>
				<view class="HotGoodscurrent_content">
							<view class="recommendItem" v-for="i in hotsalegoods" :key="i.goods_id">
								<image :src="i.cover||'../../../static/微信图片_20201124091755.png'" @click="Details(i.goods_id)"></image>
								<view class="ItemTitle">
									{{i.name}}
								</view>
								<view class="ItemPrice">
									￥{{i.price}}
								</view>
							</view>
				</view>
			</view>
		</view>

		
		<view class="bottomcar">
			<view class="radio" :class="radioA?1:'radioActive'" @click="radioAll">
			</view>
			<view class="name">
				全选
			</view>
			<view class="bottomcontent">
				合计：<text class="price">￥{{TotalPrice}}</text>
				<!-- <text class="freight">(含运费￥0.0)</text> -->
				<navigator url class="button" @click="Submit">
					{{Edit?'删除':'结算'}}
				</navigator>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import {requestUrl} from '@/common/config.js'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {uniSwipeAction,uniSwipeActionItem},
		data() {
			return {
				Edit:false,
				radioA: false,
				price: 1,
				TotalPrice: 0,
				Item: [],
				access_token:'',
				hotsalegoods:[],
			  options: [{
				  text: '删除',
				  
				style: {
				                backgroundColor: '#DB1B22'
				            }


			}],}
		},
		created() {
			let _this=this
			this.$request('/app/goods/hotSaleGoods','post',{
				access_token: this.access_token,
			}).then(res=>{
				this.hotsalegoods=res.content
			})
		},
		onShow() {
			this.getcart()
			
		},
		onLoad(e) {
			console.log(e)
		},
		methods: {
			Details(e){
				// uni.setStorage({
				//     key: 'goods_id',
				//     data: JSON.stringify(e),
				//     success: function () {
				//     }
				// });
				uni.navigateTo({
				    url: '/pagesA/CommodityDetails/CommodityDetails?goods_id='+e
				});
			},
			change(e,index){
				console.log(e)
				this.Item.map((item,i) => {
					if(i==index){
						item.active=e
					}
					item.active=false
				})
			},
			 deleteItem (index) {
				 console.log(index)
			        // this.list.splice(index, 1)
					let arr = []
					this.Item.map((item,i) => {
						if(i==index){
						arr.push(item.cart_id)
						console.log(item)
						}
					})
					let Arr = JSON.stringify(arr.join(',')).replace("\"","").replace("\"","")
					this.$request('/app/cart/delCart','post',{
						access_token: this.access_token,
						cart_ids: Arr,
					}).then(res=>{
						this.getcart()
					})
			      },
			getcart(){
				let time = Math.round(new Date().getTime() / 1000).toString()
				if(uni.getStorageSync('access_token')){
				this.access_token=JSON.parse(uni.getStorageSync('access_token'))
				}else{
					return uni.showModal({
					    title: '提示',
					    content: '你还未登录，请先登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
					        } else if (res.cancel) {
					        }
					    }
					});
				}
				let _this = this
				let Time = ['time', time].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr = [content, Time].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr.join('&'))
				this.$request('/app/cart/getCarts','post',{
					access_token: this.access_token,
				}).then(res=>{
						if (res.errcode == 0) {
							res.content.forEach(v => {
								v.active = false
							})
							_this.Item = res.content
							console.log(_this.Item)
						} else if  (res.errcode==99){
						uni.showModal({
						    title: '提示',
						    content: res.message,
						    success: function (res) {
						        if (res.confirm) {
									uni.navigateTo({
										url:'/pages/login/login'
									})
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
						} else{
							_this.Item = []
				
						}
				})
			},
			changeEdit(){
				this.Edit=!this.Edit
				console.log(this.Edit)
				if(this.Edit==false){
					let arr2 = []
					this.Item.map(item => {
						let obj = {}
						obj.quantity = item.quantity
						obj.cart_id = item.cart_id
						arr2.push(obj)
					})
					let Arr1 = JSON.stringify(arr2)
					this.$request('/app/cart/editCart','post',{
						access_token: this.access_token,
						data:Arr1,
					}).then(res=>{
						
					})
				}
			},
			
			Submit() {
				let _this = this
				let time = Math.round(new Date().getTime() / 1000).toString()
				let Time = ['time', time].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				if(this.Edit){
					let arr = []
					this.Item.map(item => {
						if(item.active){
						arr.push(item.cart_id)
						}
					})
					let Arr = JSON.stringify(arr.join(',')).replace("\"","").replace("\"","")
					let data = ['data', Arr].join('=')
					let arr1 = [content, data,Time].sort(function(a, b) {
						a - b
					})
					let newarr = md5(arr1.join('&'))
					this.$request('/app/cart/delCart','post',{
						access_token: this.access_token,
						cart_ids: Arr,
					}).then(res=>{
						let arr = [content, Time].sort(function(a, b) {
							a - b
						})
						let newarr = md5(arr.join('&'))
						this.getcart()
					})
					// uni.request({
					// 	url: requestUrl+'/app/cart/delCart',
					// 	method: "GET",
					// 	data: {
					// 		access_token: this.access_token,
					// 		time: time,
					// 		sign: newarr,
					// 		cart_ids: Arr,
					// 	},
					// 	success: function(res) {
					// 		let arr = [content, Time].sort(function(a, b) {
					// 			a - b
					// 		})
					// 		let newarr = md5(arr.join('&'))
					// 		_this.getcart()
					// 	}
					// });
					this.Edit=false
				}else{
					
					let arr = []
					let arr2 = []
					this.Item.map(item => {
						if(item.active){
							let obj = {}
							obj.quantity = item.quantity
							obj.cart_id = item.cart_id
							arr.push(item.cart_id)
							arr2.push(obj)
						}
					})
					let Arr = JSON.stringify(arr.join(',')).replace("\"","").replace("\"","")
					let Arr1 = JSON.stringify(arr2)
					let cart = ['cart_ids', arr].join('=')
					// let address = ['address_id', arr.address_id].join('=')
					let t=3
					let T = ['t',t].join('=')
					let arr1 = [content,cart,Time].sort(function(a, b) {
						a - b
					})
					let newarr = md5(arr1.join('&'))
					this.$request('/app/cart/editCart','post',{
						access_token: this.access_token,
						data:Arr1,
					}).then(res=>{
						
					})
					// uni.request({
					// 	url: requestUrl+'/app/cart/editCart',
					// 	method: "GET",
					// 	data: {
					// 		access_token: this.access_token,
					// 		time: time,
					// 		sign: newarr,
					// 		data:Arr1,
					// 	},
					// 	success: function(res) {

					// 	}
					// });
					this.$request('/app/cart/settlement','post',{
						access_token: this.access_token,
						time: time,
						sign: newarr,
						type:'2',
						data:Arr,
						t:t
					}).then(res=>{
						if(res.errcode==0){
							uni.setStorage({
							    key: 'content',
							    data: JSON.stringify(res.content),
							    success: function () {
							    }
							});
						uni.navigateTo({
							url: '/pagesA/ConfirmOrder/ConfirmOrder'
						});
						}else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					})
					// uni.request({
					// 	url: requestUrl+'/app/cart/settlement',
					// 	method: "GET",
					// 	data: {
					// 		access_token: this.access_token,
					// 		time: time,
					// 		sign: newarr,
					// 		type:'2',
					// 		data:Arr,
					// 		t:t
					// 	},
					// 	success: function(res) {
					// 		if(res.data.errcode==0){
					// 			uni.setStorage({
					// 			    key: 'content',
					// 			    data: JSON.stringify(res.data.content),
					// 			    success: function () {
					// 			    }
					// 			});
					// 		uni.navigateTo({
					// 			url: '/pagesA/ConfirmOrder/ConfirmOrder'
					// 		});
					// 		}else{
					// 			uni.showToast({
					// 				title:'请选择商品',
					// 				icon:'none'
					// 			})
					// 		}
					// 	}
					// });
				}
			},
			Modelchange() {
			},
			radiochange(e) {
				this.Item.forEach(v => {
					if (v.cart_id == e.cart_id) {
						v.active = !v.active
					}
				})
			},
			changeNum(num, n) {
				this.Item.map(item => item.quantity = Number(item.quantity))
				this.Item.forEach(v => {
					if (v.cart_id == n.cart_id) {
						n.quantity += Number(num)
					}
				})
			},
			radioAll() {
				this.radioA = !this.radioA
				this.Item.map(v => {
					return v.active = this.radioA
				})
			},

		},
		watch: {

		},
		computed: {
			totalprice() {
				let num = 0
				this.Item.forEach(v => {
					if (v.active == true) {
						num += Number(v.quantity * v.price)
					}
				})
				this.TotalPrice = num.toFixed(2)
			}
		}
	}
</script>

<style lang="less" scoped>
	.car {
		height: 100%;
		background-color: #F3F4F5;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			flex-flow: row-reverse;
			align-items: center;
			background: #fff;
			border-top: 1px solid #F3F4F5;
			border-bottom: 1px solid #F3F4F5;

			view {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				padding: 20rpx;
				color: #333333;
			}
		}
		.padding{
			padding: 10rpx;
		}
		.content {
			flex: 1;
			overflow-y: scroll;
    padding-bottom: 100rpx;
			.ModalHide {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.ModalContent {
					width: 300rpx;
					padding-bottom: 300rpx;

					image {
						width: 300rpx;
						height: 300rpx;
					}

					view {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9DA5A8;
						margin: 60rpx auto;
						text-align: center;
					}

					navigator {
						width: 150rpx;
						padding: 14rpx 46rpx;
						background: #DB1B22;
						border-radius: 36rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin: 0 auto;
					}
				}
			}


			.GoodsList {
				    margin-bottom: 10px;
				.GoodsItem {
					width: 100%;
					height: 220rpx;
					border-bottom: 1px solid #F3F4F5;
					display: flex;
					position: relative;
					padding: 20rpx 20rpx 20rpx 80rpx;
					box-sizing: border-box;
					background: #fff;

					.radio {
						width: 57rpx;
						height: 180rpx;
						position: absolute;
						top: 20rpx;
						left: 12rpx;
						background: url(@/static/selected%20active.png) 12rpx 70rpx no-repeat;
						background-size: 32rpx 32rpx;
					}

					.radioActive {
						background: url(@/static/selected／on.png) 12rpx 70rpx no-repeat;
						background-size: 32rpx 32rpx;
					}

					image {
						width: 180rpx;
						height: 180rpx;
						margin-right: 20rpx;
					}
					.image{
						position: absolute;
						top: 21rpx;
						left: 81rpx;
						color: #fff;
						background: rgba(0,0,0,0.5);
						display: flex;
						justify-content: center;
						align-items: center;
						width: 180rpx;
						height: 180rpx;
					}
					.ItemContent {
						flex: 1;

						.title {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
						}

						.parameter {
							margin: 10rpx 0;
							display: flex;
							position: relative;

							.parameter1 {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #9DA5A8;
							}
						}

						.price {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #DB1B22;
						}

						.ctrlbox {
							position: absolute;
							bottom: 20rpx;
							right: 24rpx;
							display: flex;

							button {
								padding: 0;
								margin: 0;
								width: 40rpx;
								height: 45rpx;
								background: #FFFFFF;
								border: 1px solid #9DA5A8;
								border-radius: 0;
								box-sizing: border-box;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 40rpx;

								&::after {
									border-radius: 0;
								}
							}

							view {
								width: 60rpx;
								height: 40rpx;
								background: #FFFFFF;
								border-top: 1px solid #9DA5A8;
								border-bottom: 1px solid #9DA5A8;

								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #111111;
								line-height: 40rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
		.HotGoodscurrent{
			background: #fff;
			    display: flex;
			    flex-direction: column;
			.HotGoodscurrent_title{
				padding: 30rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.HotGoodscurrent_content{
					padding: 30rpx;
					flex: 1;
					padding-top: 0;
					flex-flow: wrap row;
					overflow-x: scroll;
					display: flex;
					    justify-content: space-around;
					.recommendItem {
						margin: 8rpx;
						width: 44%;
						display: flex;
						flex-direction: column;
						background-color: #fff;
						image {
							width: 300rpx;
							height: 300rpx;
						}
				
						.ItemTitle {
							height: 60rpx;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
				
						.ItemPrice {
							font-size: 22rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #DB1B22;
						}
				
						.ItemTag {
							display: flex;
				
							view {
								border-radius: 40rpx;
								border: 1px solid #DB1B22;
								padding: 0 2rpx;
								margin: 0 2rpx;
								font-size: 18rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #DB1B22;
							}
						}
					}
			}
		}
		.bottomcar {
			width: 100%;
			height: 100rpx;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			background: #fff;
			position: fixed;
			bottom: 0;
			.radioActive {
				background: url(@/static/selected／on.png) no-repeat 24rpx 30rpx !important;
				background-size: 32rpx 32rpx !important;
			}
			.radio {
				width: 32rpx;
				height: 90rpx;
				background: url(@/static/selected%20active.png) no-repeat 24rpx 30rpx ;
				background-size: 32rpx 32rpx;
				padding-left: 26rpx;
				padding-right: 6rpx;
			}


			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				margin-left: 16rpx;
			}

			.bottomcontent {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 42rpx;
				margin-left: 50rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex: 1;

				.price {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #DB1B22;
					// margin: 0 34rpx 0 0;
					line-height: 42rpx;
					display: block;
					// width: 120rpx;
				}

				// .freight {
				// 	font-size: 20rpx;
				// 	font-family: PingFangSC-Regular, PingFang SC;
				// 	font-weight: 400;
				// 	color: #111111;
				// 	line-height: 42rpx;
				// }

				.button {
					padding: 12rpx 60rpx;
					background: #DB1B22;
					border-radius: 36px;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin:0 30rpx;
				}
			}
		}
	}
</style>
